<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle role-box">
      <el-card class="box-card">
        <!-- 查询条件 -->
        <el-row class="table-selbox" v-if="btnSel">
          <!-- 查询条件表单 -->
          <el-form :inline="true" :model="formInline">
            <!-- 角色选择 -->
            <el-form-item label="角色选择" prop="roleId">
              <!-- 角色ID -->
              <el-select
                v-model="formInline.roleId"
                filterable
                auto-complete="off"
                placeholder="请选择"
              >
                <el-option label="无" value=""></el-option>
                <!-- 循环所有角色数据 -->
                <el-option
                  v-for="(item,index) in roleList"
                  :key="index"
                  :label="item.roleName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 员工姓名 -->
            <el-form-item label="员工姓名">
              <!-- 员工选择框子组件 -->
              <!-- <user-sel :users="users" @seluser="selUser"></user-sel> -->
              <el-autocomplete
                v-model="formInline.userId"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入姓名"
                @select="handleSelect"
                clearable
              >
                <template slot-scope="{ item }">
                  <div class="selName">
                    <span>{{ item.userName }}</span>
                    <span>[{{ item.userId }}]</span>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
            <!-- 搜索 -->
            <el-form-item>
              <el-button icon="el-icon-search" @click="selHandle">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <!-- 基本操作按钮 是否授权显示-->
        <el-row class="table-btns" v-if="[btnAdd,btnDel,btnUpload,btnDown].indexOf(true) > -1">
          <!-- 添加 -->
          <el-button
            v-if="btnAdd"
            type="success"
            size="medium"
            icon="el-icon-document-add"
            @click="addHandle"
          >添加</el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            size="medium"
            icon="el-icon-delete"
            @click="batchRemove"
            v-if="btnDel"
          >删除</el-button>
        </el-row>
        <!-- 数据列表 -->
        <el-table
          :data="menusData"
          border
          @selection-change="selsChange"
          style="width: 100%"
          height="580"
          ref="menusData"
        >
          <!-- 全选 -->
          <el-table-column type="selection" width="40" fixed></el-table-column>
          <el-table-column prop="compName"  width="150" label="公司" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="deptName"  width="150" label="部门" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="userId"  width="150" align="center" label="工号"></el-table-column>
          <el-table-column prop="userName"  width="100" align="center" label="姓名"></el-table-column>
          <el-table-column prop="roleName" label="角色名称" width="100" align="center"></el-table-column>
          <!-- 备注说明 -->
          <el-table-column prop="note" label="备注说明" :show-overflow-tooltip="true"></el-table-column>
          <!-- 操作列 -->
          <el-table-column
            label="管理"
            fixed="right"
            align="center"
            width="160"
            v-if="[btnDel,btnEdit].indexOf(true) > -1"
          >
            <template slot-scope="scope">
              <!-- 删除 -->
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)" v-if="btnDel">删除</el-button>
              <!-- 修改 -->
              <el-button size="mini" @click="editHandle(scope.row)" v-if="btnEdit">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="table-pageblock">
          <!-- current-page 当前页数  page-size 每页显示数 total 总页数-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20,50,80,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
      <!-- 弹窗 新增or修改 -->
      <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
      >
        <!-- 添加、修改表单 -->
        <el-form ref="editForm" :model="editForm" label-width="80px" :rules="editFormRules">
          <el-row :gutter="24">
            <el-col :span="12">
              <!-- 员工姓名 -->
              <el-form-item label="员工姓名">
                <!-- 员工选择子组件 -->
                <!-- <user-sel :users="users" @seluser="selUser" :sel="sel"></user-sel> -->
                <el-autocomplete
                v-model="editForm.userId"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入姓名"
                @select="editSelect"
                style="width:100%;"
                clearable
              >
                <template slot-scope="{ item }">
                  <div class="selName">
                    <span>{{ item.userName }}</span>
                    <span>[{{ item.userId }}]</span>
                  </div>
                </template>
              </el-autocomplete>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 角色选择 -->
              <el-form-item label="角色选择" prop="roleId">
                <el-select
                  v-model="editForm.roleId"
                  @change="roleSel"
                  filterable
                  auto-complete="off"
                  placeholder="请选择"
                  style="width:100%;"
                >
                <!-- 循环所有角色信息 -->
                  <el-option
                    v-for="(item,index) in roleList"
                    :key="index"
                    :label="item.roleName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 设置权限 -->
          <el-form-item label="设置权限" prop="permissions">
            <!-- 菜单按钮权限树子组件 -->
            <menu-tree
              :meunsId="isMenuId"
              :trees="trees"
              :selBtns="selBtns"
              @checkTrees="getChecks($event)"
              ref="menuTrees"
            ></menu-tree>
          </el-form-item>
          <!-- 备注说明 输入限制20 -->
          <el-form-item label="备注说明" prop="note">
            <el-input
              type="textarea"
              placeholder="备注说明（20字以内）"
              maxlength="20"
              v-model="editForm.note"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!-- 取消 关闭弹窗 -->
          <el-button @click.native="dialogFormVisible=false">取消</el-button>
          <!-- 添加 初始化弹窗表单数据 -->
          <el-button
            v-if="dialogStatus=='create'"
            type="primary"
            @click="createData"
          >添加</el-button>
          <!-- 修改 初始化弹窗表单数据 -->
          <el-button v-else type="primary" @click="editData">修改</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 引入菜单按钮权限子组件
import menuTree from '@/components/Tree';
import { _debounce } from '@/public/debounce.js';

export default {
  name: 'permissions',
  // 注入组件
  components: {
    menuTree
  },

  // 父组件传值子组件
  props: {
    // 按钮级权限
    btns: {
      type: Object
    }
  },

  // 无白屏刷新方法注入
  inject: ['reload'],

  // 监听
  watch: {
    // 按钮权限数据
    btns (val, oldVal) {
      // 刷新当前页
      this.reload();
    },
    // 初始化选中节点数据
    setTree: {
      // immediate: true,
      handler (val, oldVal) {
        this.$refs.menuTrees.setCheckedKeys(this.setTree);
      }
    }
  },

  // 当前页面数据
  data () {
    return {
      isMenuId: false,
      // 获取选中用户信息
      getUser: [],

      // 目录树
      trees: [],

      // 授权按钮信息
      roleBtns: [],

      // 所有用户信息
      users: [],

      // 选中树
      setTree: [],

      // 修改回显用户
      sel: '',

      // 选中按钮
      selBtns: [],
      // 按钮显示隐藏  - 默认值
      btnSel: true,
      btnDel: true,
      btnUpload: true,
      btnDown: true,
      btnAdd: true,
      btnEdit: true,

      // 获取角色列表
      roleList: [],

      // 搜索条件
      formInline: {
        userId: '',
        roleId: ''
      },
      // 所有员工数据
      usersAll: [],

      // 模糊搜索
      restaurants: [],
      state: '',
      timeout: null,

      // 列表数据
      menusData: [{}],
      // 当前页
      currentPage: 1,
      // 当前数
      pageSize: 20,
      // 总条目数
      total: 20,

      // 弹窗类别
      dialogStatus: '',
      // 弹窗标题
      textMap: {
        edit: '修改信息',
        create: '添加信息'
      },
      // 弹窗是否显示
      dialogFormVisible: false,

      // 列表选中列
      sels: [],

      // 编辑界面输入框校验规则
      editFormRules: {
        roleId: [{ required: true, message: '请输入角色名', trigger: 'blur' }]
      },

      // 界面默认数据
      editForm: {
        roleName: '',
        note: ''
      }

    };
  },

  // 实例创建后执行
  created () {
    // 按钮级授权
    this.authorization(this.$store.state.btns);

    // 获取所有角色
    this.getRole();

    this.getUsersAll();

    // 加载分页数据
    this.getmenusDataByPage();
  },

  mounted () {
    this.restaurants = this.loadAll();
    // this.getHeight();
    // 增加监听事件，窗口变化时得到高度。
    // window.addEventListener('resize', this.getHeight, false);
  },

  methods: {
    // 表格高度自适应
    // getHeight () {
    // // 获取浏览器高度并计算得到表格所用高度。
    //   this.tableHeight = document.documentElement.clientHeight - 350;
    // },
    // 获取所有员工数据
    getUsersAll () {
      let _this = this;
      let params = {
        status: '0'
      };
      _this.$http.post('api/findAllBaseUsers', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          for (let i = datas.length; i--;) {
            _this.usersAll.push({
              compName: datas[i].compName,
              deptName: datas[i].deptName,
              userId: datas[i].userId,
              userName: datas[i].userName
            });
          };
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 加载全部员工数据
    loadAll () {
      return this.usersAll;
    },

    // 自动检索匹配
    querySearchAsync (queryString, cb) {
      let _this = this;
      let restaurants = _this.restaurants;
      let results = queryString ? restaurants.filter(_this.createStateFilter(queryString)) : restaurants;
      clearTimeout(_this.timeout);
      _this.timeout = setTimeout(() => {
        cb(results);
      }, 300 * Math.random());
    },

    // 查询
    createStateFilter (queryString) {
      return (state) => {
        return (state.userName.indexOf(queryString) === 0);
      };
    },

    // 选中赋值
    handleSelect (item) {
      this.formInline.userId = item.userId;
    },

    editSelect (item) {
      this.editForm.userId = item.userId;
    },

    // 角色选择
    roleSel (val) {
      let _this = this;
      // 获取角色ID
      let params = {
        roleId: val
      };
      // 根据角色ID获取对应授权菜单
      _this.$http.post('api/findRolePowerById', params).then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          // 返回授权菜单
          let roleMenus = datas.roleMenus;

          // 获取所有菜单数据
          _this.$http.post('api/findAllMenuNoPage').then(res => {
            if (res.code === 0) {
              // 获取全部菜单
              let allMensList = res.datas;

              let ptrees = [];

              // 匹配所有菜单数据，根据对应ID生成授权树数据
              allMensList.map(key => {
                roleMenus.map(index => {
                  if (key.id === index) {
                    ptrees.push(key);
                  }
                });
              });

              // 判断当前选择角色授权菜单数据是否为空
              if (ptrees.length > 0) {
                // 循环所有菜单数据，获取对应父级菜单数据
                allMensList.map(key => {
                  ptrees.map(index => {
                    if (key.id === index.parentId) {
                      ptrees.push(key);
                    }
                  });
                });

                // 菜单按钮授权树数据赋值  去重过滤
                _this.trees = _this.setArray(ptrees);
              }
              _this.trees.map(item => {
                if (item.id === 75 || item.id === 76) {
                  _this.isMenuId = true;
                }
              });
            }
          }).catch(err => {
            if (err === undefined) {
              _this.$message({
                message: '服务器响应异常！',
                type: 'error'
              });
              return false;
            }
          });
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 数组去重
    setArray (data) {
      let result = [];
      let obj = {};
      for (let i = data.length; i--;) {
        if (!obj[data[i].id]) {
          result.push(data[i]);
          obj[data[i].id] = true;
        }
      }
      return result;
    },

    // 点选按钮
    getChecks (data) {
      let _this = this;
      // 判断当前勾选按钮集合是否为空
      if (_this.roleBtns.length === 0) {
        _this.roleBtns.push(data);
      } else {
        let btns = _this.roleBtns;
        for (let i = btns.length; i--;) {
          if (btns[i].id === data.id) {
            btns.splice(i, 1);
          }
        }
        btns.push(data);
        // 获取所有勾选按钮与对应菜单ID
        _this.roleBtns = btns;
      }
    },

    // 按钮级授权
    authorization (data) {
      let _this = this;
      for (let i in data) {
        if (data['sel'] === 0) {
          _this.btnSel = false;
        }
        if (data['add'] === 0) {
          _this.btnAdd = false;
        }
        if (data['del'] === 0) {
          _this.btnDel = false;
        }
        if (data['upload'] === 0) {
          _this.btnUpload = false;
        }
        if (data['down'] === 0) {
          _this.btnDown = false;
        }
        if (data['edit'] === 0) {
          _this.btnEdit = false;
        }
        return i;
      }
    },

    // 获取所有角色信息
    getRole () {
      let _this = this;
      // 获取所有角色信息
      _this.$http.get('api/findRoleSearch').then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          _this.roleList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 显示编辑界面
    editHandle: function (row) {
      let _this = this;
      // 获取所选列的员工ID
      let params = {
        userId: row.userId
      };
      // 根据员工ID查询 该员工的授权按钮信息
      _this.$http.post('api/getUserRoleAndBtn', params).then(res => {
        let {code, datas} = res;
        // 判断Code状态
        if (code === 0) {
          // 所选按钮赋值
          _this.selBtns = JSON.parse(JSON.stringify(datas.menuBtns));
          // 所有勾选按钮赋值
          _this.roleBtns = JSON.parse(JSON.stringify(datas.menuBtns));
          // let users = [];
          // 所有员工信息
          // users = _this.users;

          // 根据所选员工信息循环匹配获取对应公司ID 部门ID
          // users.forEach(element => {
          //   if (element.userId === datas.userId) {
          //     _this.sel = element.userName;
          //     _this.getUser = [element.userId];
          //     _this.roleSel(datas.roleId);
          //   }
          // });
          _this.roleSel(datas.roleId);
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });

      // 弹窗类型
      _this.dialogStatus = 'edit';
      // 弹窗显示状态
      _this.dialogFormVisible = true;
      // 弹窗表单初始化数据
      _this.editForm = Object.assign({}, row);
    },

    // 显示新增界面
    addHandle: function () {
      let _this = this;
      // 所选员工清空
      _this.sel = '';
      // 菜单按钮树清空
      _this.trees = [];
      // 勾选按钮数据清空
      _this.selBtns = [];
      // 弹窗类型
      _this.dialogStatus = 'create';
      // 弹窗显示状态
      _this.dialogFormVisible = true;
      // 重置新增界面默认数据
      _this.editForm = {
        userId: '',
        roleId: '',
        note: ''
      };
    },

    // 查询
    selHandle: function () {
      let _this = this;
      let params = {
        userId: _this.formInline.userId === null ? '' : _this.formInline.userId,
        roleId: _this.formInline.roleId === null ? '' : _this.formInline.roleId,
        pageNum: _this.currentPage,
        pageSize: _this.pageSize
      };
      // 根据员工ID 角色ID 获取分页数据
      _this.$http.raw('api/findAllUserRole', params).then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          // 总页数
          _this.total = datas.total;
          // 数据结果集
          _this.menusData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getmenusDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 修改
    editData: _debounce(function () {
      let _this = this;

      // 获取角色按钮勾选信息
      // let menuBtns = [];
      let nodeArray = [];
      // 初始化获取菜单下的按钮数据
      for (let j = _this.trees.length; j--;) {
        nodeArray.push({
          menuId: _this.trees[j].id,
          sel: 0,
          add: 0,
          del: 0,
          edit: 0,
          upload: 0,
          down: 0,
          userId: _this.editForm.userId
        });
      }
      let newRoleBtns = JSON.parse(JSON.stringify(_this.roleBtns));
      let newAddList = newRoleBtns.filter((data) => {
        if (data.parentId) return data;
      });
      newRoleBtns.map(item => {
        newAddList.map(ite => {
          if (item.menuId === ite.id) {
            item.sel = ite.sel ? 1 : 0;
            item.add = ite.add ? 1 : 0;
            item.del = ite.del ? 1 : 0;
            item.edit = ite.edit ? 1 : 0;
            item.upload = ite.upload ? 1 : 0;
            item.down = ite.down ? 1 : 0;
            item.batch = ite.batch ? 1 : 0;
          }
        });
      });
      nodeArray.map(lmenu => {
        newRoleBtns.map(btns => {
          if (lmenu.menuId === btns.menuId) {
            lmenu.menuId = lmenu.menuId;
            lmenu.sel = btns.sel;
            lmenu.add = btns.add;
            lmenu.del = btns.del;
            lmenu.edit = btns.edit;
            lmenu.upload = btns.upload;
            lmenu.down = btns.down;
            lmenu.userId = btns.userId;
            lmenu.batch = btns.batch;
          }
        });
      });

      _this.$nextTick(() => {
      // 判断是否通过验证规则验证
        _this.$refs['editForm'].validate(valid => {
          if (valid) {
            // 收集请求数据
            let params = {
              id: _this.editForm.id,
              userId: _this.editForm.userId === null ? '' : _this.editForm.userId,
              roleId: _this.editForm.roleId === null ? '' : _this.editForm.roleId,
              menuBtns: nodeArray,
              note: _this.editForm.note === null ? '' : _this.editForm.note
            };
            // 修改员工角色按钮授权信息
            _this.$http.raw('api/updateUserRoleAndBtn', params).then(res => {
              let { code } = res;
              // 判断Code状态
              if (code === 0) {
                _this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
                // 初始化弹窗表单数据
                _this.$refs['editForm'].resetFields();
                // 关闭弹窗
                _this.dialogFormVisible = false;
                // 刷新列表
                _this.getmenusDataByPage();
              }
            }).catch(err => {
              if (err === undefined) {
                _this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
          }
        });
      });
    }, 1000),

    // 添加
    createData: _debounce(function () {
      let _this = this;
      //  获取选择员工工号
      let user = {
        userId: _this.editForm.userId
      };
      // 根据员工工号判断是否存在其他角色权限
      _this.$http.post('api/getUserRoleCount', user).then(res => {
        let { code, datas } = res;
        //  判断Code状态
        if (code === 0) {
          // 判断是否存在
          if (datas > 0) {
            _this.$message({
              message: '该员工已存在其他角色权限！',
              type: 'error'
            });
          } else {
            let menuBtns = [];
            let nodeArray = [];

            // 初始化获取菜单下的按钮数据
            for (let j = _this.trees.length; j--;) {
              nodeArray.push({
                menuId: _this.trees[j].id,
                sel: 0,
                add: 0,
                del: 0,
                edit: 0,
                upload: 0,
                down: 0,
                batch: 0,
                userId: _this.editForm.userId
              });
            }

            // 根据勾选数据匹配赋值
            for (let i = _this.roleBtns.length; i--;) {
              menuBtns.push({
                menuId: _this.roleBtns[i].id,
                sel: _this.roleBtns[i].sel ? 1 : 0,
                add: _this.roleBtns[i].add ? 1 : 0,
                del: _this.roleBtns[i].del ? 1 : 0,
                edit: _this.roleBtns[i].edit ? 1 : 0,
                upload: _this.roleBtns[i].upload ? 1 : 0,
                down: _this.roleBtns[i].down ? 1 : 0,
                batch: _this.roleBtns[i].batch ? 1 : 0,
                userId: _this.editForm.userId
              });
            }

            // 过滤重复数据并修改 初始按钮数据
            nodeArray.map(lmenu => {
              menuBtns.map(btns => {
                if (lmenu.menuId === btns.menuId) {
                  lmenu.sel = btns.sel;
                  lmenu.add = btns.add;
                  lmenu.del = btns.del;
                  lmenu.edit = btns.edit;
                  lmenu.upload = btns.upload;
                  lmenu.down = btns.down;
                  lmenu.batch = btns.batch;
                }
              });
            });

            _this.$nextTick(() => {
              // 判断是否通过验证规则验证
              _this.$refs['editForm'].validate(valid => {
                if (valid) {
                  // 收集（所选员工ID  所选角色ID 所有菜单按钮勾选信息）请求数据
                  let params = {
                    userId: _this.editForm.userId === null ? '' : _this.editForm.userId,
                    roleId: _this.editForm.roleId === null ? '' : _this.editForm.roleId,
                    menuBtns: nodeArray,
                    note: _this.editForm.note === null ? '' : _this.editForm.note
                  };

                  // 修改员工角色按钮授权信息
                  _this.$http.raw('api/insertUserRoleAndBtn', params).then(res => {
                    let { code } = res;
                    // 判断Code状态
                    if (code === 0) {
                      _this.$message({
                        message: '添加成功！',
                        type: 'success'
                      });
                      _this.$refs['editForm'].resetFields();
                      _this.dialogFormVisible = false;
                      // 刷新列表
                      _this.getmenusDataByPage();
                    }
                  }).catch(err => {
                    if (err === undefined) {
                      _this.$message({
                        message: '服务器响应异常！',
                        type: 'error'
                      });
                      return false;
                    }
                  });
                }
              });
            });
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    }, 200),

    // 删除
    handleDelete (data) {
      let _this = this;
      // 删除二次确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 获取删除所选ID
        let params = [data.userId];
        // 根据所选ID删除对应数据信息
        _this.$http.raw('api/batchDelUserRoleAndBtns', params).then(res => {
          let { code } = res;
          // 判断Code状态
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '删除成功！'
            });
            // 刷新列表
            _this.getmenusDataByPage();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 全选、单选、多选
    selsChange: function (sels) {
      this.sels = sels;
    },

    // 批量删除
    batchRemove: function () {
      let _this = this;
      // 判断是否选择数据
      if (!_this.sels.length) {
        _this.$message.warning('您还没选择任何数据！');
        return;
      }
      // 删除二次确认
      _this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // 循环获取所选列ID
        let params = [];
        _this.sels.map(item => {
          return params.push(item.userId);
        });
        // 根据ID删除对应数据信息
        _this.$http.raw('api/batchDelUserRoleAndBtns', params).then(res => {
          let { code } = res;
          // 判断Code状态
          if (code === 0) {
            _this.$message({
              type: 'success',
              message: '批量删除成功！'
            });
            // 刷新列表
            _this.getmenusDataByPage();
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 刷新页面数据
    getmenusDataByPage () {
      let _this = this;
      // 收集请求数据
      let params = {
        userId: _this.formInline.userId === null ? '' : _this.formInline.userId,
        roleId: _this.formInline.roleId === null ? '' : _this.formInline.roleId,
        pageNum: _this.currentPage,
        pageSize: _this.pageSize
      };

      // 获取分页数据
      _this.$http.raw('api/findAllUserRole', params).then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          _this.total = datas.total;
          _this.menusData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getmenusDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 每页显示的条数改变
    handleSizeChange (val) {
      this.pageSize = val;
      // 调用刷新页面
      this.getmenusDataByPage();
    },
    // 当前页码
    handleCurrentChange (val) {
      this.currentPage = val;
      // 调用
      this.getmenusDataByPage();
    }
  }
};
</script>

<style lang='scss' scoped>
@import './index.scss';
</style>
<style lang="scss">
  .role-box {
    .el-dialog {
      width: 60%;
    }
  }
</style>
